<script setup>
import vSwiper from '@/components/Swiper.vue';
import ArticleCard from '@/components/ArticleCard.vue';
import ProfileCard from '@/components/ProfileCard.vue';
import TagsCard from '@/components/TagsCard.vue';

const articles = ref([
  { title: '文章1', description: '描述...', date: '2023-12-01' },
  { title: '文章2', description: '描述...', date: '2023-12-02' }
]);
</script>

<template>
  <!-- 导航轮播 -->
  <vSwiper />
  <div class="wrapper">
    <div class="content">
      <ArticleCard v-for="article in articles" :key="article.title" :article="article" />
    </div>
    <div class="sidebar">
      <ProfileCard />
      <TagsCard class="mt-20" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  margin-top: var(--gap);
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--gap);

  .sidebar {
    width: 100%;
  }
}

.mt-20 {
  margin-top: var(--gap);
}

// 媒体查询
@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}
</style>